<template>
  <div class="project-container">
    <v-card class="project-container-card" tile>
      <v-responsive height="100%" :width="panelWidth[0]" class="box">
        <v-toolbar dense color="#f5f5f5" flat>
          <v-toolbar-title class="box-title">Projects</v-toolbar-title>
          <v-btn
            class="ml-2"
            width="32"
            height="32"
            color="#D9D9D9"
            fab
            elevation="0"
            @click="overlayFunc(1)"
          >
            <v-icon color="#556282">mdi-plus-thick</v-icon>
          </v-btn>
          <v-spacer></v-spacer>
          <v-btn icon @click="zoomPanel('Projects')">
            <v-icon small>{{
              zoom1Status ? "mdi-arrow-collapse" : "mdi-arrow-expand"
            }}</v-icon>
          </v-btn>
        </v-toolbar>
        <Projects :width="panelWidth[0]" />
      </v-responsive>
      <v-responsive
        height="100%"
        :width="panelWidth[1]"
        class="box"
        :class="zoom2Status ? 'active' : ''"
      >
        <v-toolbar
          dense
          flat
          :color="zoom2Status ? '#626c84' : '#f5f5f5'"
          :dark="zoom2Status ? true : false"
        >
          <v-toolbar-title class="box-title">Jobs</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn icon @click="zoomPanel('Jobs')">
            <v-icon small>{{
              zoom2Status ? "mdi-arrow-collapse" : "mdi-arrow-expand"
            }}</v-icon>
          </v-btn>
        </v-toolbar>
        <Jobs />
      </v-responsive>
      <v-responsive
        height="100%"
        :width="panelWidth[2]"
        class="box"
        :class="zoom3Status ? 'active' : ''"
      >
        <v-toolbar
          dense
          flat
          :color="zoom3Status ? '#626c84' : '#f5f5f5'"
          :dark="zoom3Status ? true : false"
        >
          <v-toolbar-title class="box-title">Tasks</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn icon @click="zoomPanel('Tasks')">
            <v-icon small>{{
              !zoom3Status ? "mdi-arrow-collapse" : "mdi-arrow-expand"
            }}</v-icon>
          </v-btn>
        </v-toolbar>
        <v-skeleton-loader
          v-if="loadingTasks"
          type="article, list-item@20"
        ></v-skeleton-loader>
        <Tasks
          v-else
          v-model="selectedTask"
          :tasks="tasks"
          :project="selectedProject"
        />
      </v-responsive>
    </v-card>
    <Chats :items="chatsItems"></Chats>
    <v-overlay :value="overlay">
      <AddNew :step="step" />
    </v-overlay>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import Projects from "@/components/Project/Projects/Projects.vue";
import Jobs from "@/components/Project/Jobs/Jobs.vue";
import Tasks from "@/components/Project/Tasks/Tasks.vue";
import AddNew from "@/components/Project/AddNew/Index.vue";
import Chats from "@/components/Project/Chats/index.vue";
import { IJobItem, ITasks, ITaskItem } from "@/components/Project/index";

@Component({
  components: {
    Projects,
    Jobs,
    Tasks,
    AddNew,
    Chats,
  },
})
export default class Project extends Vue {
  step = 1;

  chatsItems = [
    {
      id: "1",
      time: "11:21 am",
      avatar: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
      name: "Brunch this weekend?",
      subtitle: `I'll be in your neighborhood doing errands this weekend. Do you want to hang out?`,
      unreadNumber: 2,
    },
    {
      id: "2",
      time: "11:21 am",
      avatar: "https://cdn.vuetifyjs.com/images/lists/2.jpg",
      name: "Summer BBQ",
      subtitle: `&mdash; Wish I could come, but I'm out of town this weekend.`,
    },
    {
      id: "3",
      time: "11:21 am",
      avatar: "https://cdn.vuetifyjs.com/images/lists/3.jpg",
      name: "Oui oui",
      subtitle: "Do you have Paris recommendations? Have you ever been?",
    },
    {
      id: "4",
      time: "11:21 am",
      avatar: "https://cdn.vuetifyjs.com/images/lists/4.jpg",
      name: "Birthday gift",
      subtitle:
        "Have any ideas about what we should get Heidi for her birthday?",
    },
    {
      id: "5",
      time: "11:21 am",
      avatar: "https://cdn.vuetifyjs.com/images/lists/5.jpg",
      name: "Recipe to try",
      subtitle: "We should eat this: Grate, Squash, Corn, and tomatillo Tacos.",
    },
  ];

  switchStep(step: number) {
    this.step = step;
  }

  panelWidth = ["50%", "50%", "0%"];
  zoom1Status = true;
  zoom2Status = true;
  zoom3Status = false;
  zoomPanel(keyWord: string) {
    switch (keyWord) {
      case "Projects":
        this.zoom1Status = !this.zoom1Status;
        if (this.zoom1Status) {
          this.zoom2Status = true;
          this.zoom3Status = false;
          this.panelWidth = ["50%", "50%", "0%"];
        } else {
          this.zoom2Status = false;
          this.zoom3Status = true;
          this.panelWidth = ["33.33%", "33.33%", "33.33%"];
        }
        break;
      case "Jobs":
        this.zoom2Status = !this.zoom2Status;
        if (this.zoom2Status) {
          this.zoom1Status = false;
          this.zoom3Status = false;
          this.panelWidth = ["13%", "43.5%", "43.5%"];
        } else {
          this.zoom1Status = false;
          this.zoom3Status = true;
          this.panelWidth = ["33.33%", "33.33%", "33.33%"];
        }
        break;
      case "Tasks":
        this.zoom3Status = !this.zoom3Status;
        if (this.zoom3Status) {
          this.zoom1Status = false;
          this.zoom2Status = false;
          this.panelWidth = ["33.33%", "33.33%", "33.33%"];
        } else {
          this.zoom1Status = false;
          this.zoom2Status = true;
          this.panelWidth = ["13%", "43.5%", "43.5%"];
        }
        break;

      default:
        break;
    }
  }
  get overlay() {
    return this.$store.state.OverlayStore.overlayStatus;
  }
  overlayFunc(step: number) {
    this.switchStep(step);
    this.$store.commit({
      type: "OverlayStore/awakeStatus",
    });
  }
  // projects
  get selectedProject() {
    return this.$store.state.ProjectsStore.selectedProject;
  }
  // jobs
  get selectedJob() {
    return this.$store.state.ProjectsStore.selectedJob;
  }
  // tasts
  loadingTasks = false;
  get selectedTask() {
    return this.$store.state.ProjectsStore.selectedTask;
  }

  set selectedTask(task: ITaskItem | null) {
    console.log(task);
    this.$store.commit("ProjectsStore/setSelectedTask", task);
  }

  get tasks() {
    return this.$store.state.ProjectsStore.tasks;
  }
  @Watch("selectedJob", { immediate: true })
  onSelectedJobChange(selectedJob: IJobItem) {
    if (selectedJob) {
      this.loadingTasks = true;
      setTimeout(() => {
        const tasks: ITasks = {
          id: "1",
          number: "000092",
          customerName: "Auto Company",
          taskNumber: "DL-2021120901.01",
          jobNumber: "DL-2021120901",
          updateDate: "2021-11-12",
          updateTime: "15:23:46",
          progress: 60,
          tasksSum: 2,
          activitiesSum: 4,
          taskList: [
            {
              id: "1",
              taskNumber: "ST-2021120901.01",
              taskName: "Fix Door Handle",
              status: "Ongoing",
              priority: "High",
              activitiesSum: 3,
              startDate: "2021-12-09 15:30",
              endDate: "2022-12-09 16:00",
              info: "Providing Electrical service ",
              reportProblemList: [
                {
                  id: "1",
                  serialNumber: "AC0001",
                  itemDescription: "Air conditioner",
                  problemType: "Power supply failure",
                  solution: "Swap the PSU power cable ",
                  symptoms: "Steam system failure",
                },
                {
                  id: "2",
                  serialNumber: "AC0002",
                  itemDescription: "Air conditioner",
                  problemType: "Power supply failure",
                  solution: "Swap the PSU power cable ",
                  symptoms: "Making Noises",
                },
                {
                  id: "3",
                  serialNumber: "AC0003",
                  itemDescription: "Air conditioner",
                  problemType: "Power supply failure",
                  solution: "Swap the PSU power cable ",
                  symptoms: "System flashing",
                },
              ],
              activityLog: [
                {
                  id: "1",
                  date: "2022-08-15 15:46",
                  user: "Marcus Mo",
                  avatarSrc: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
                  procedure: "Reassign to Admin",
                  place: "Cable TV Tower, 9 Hoi Shing Road,Tsuen Wan",
                },
                {
                  id: "2",
                  date: "2022-08-18 15:48",
                  user: "Marcus Mo",
                  avatarSrc: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
                  procedure: "Start",
                  place: "Cable TV Tower, 9 Hoi Shing Road,Tsuen Wan",
                },
                {
                  id: "3",
                  date: "2022-08-20 15:40",
                  user: "Marcus Mo",
                  avatarSrc: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
                  procedure: "Checking",
                  place: "Cable TV Tower, 9 Hoi Shing Road,Tsuen Wan",
                },
              ],
              attachmentList: [
                {
                  id: "1",
                  date: "2021-08-23",
                  number: "DL-20211209002",
                  fileList: [
                    {
                      id: "1",
                      src: "https://cdn.pixabay.com/photo/2015/10/30/20/13/sunrise-1014712_960_720.jpg",
                      type: "jpg",
                      title: "FS-21080001",
                      subtitle: "Inspection Sheet",
                    },
                    {
                      id: "2",
                      src: "https://images.pexels.com/photos/1366919/pexels-photo-1366919.jpeg?auto=compress&cs=tinysrgb&w=1600",
                      type: "jpg",
                      title: "FS-21080001",
                      subtitle: "Inspection Sheet",
                    },
                  ],
                },
              ],
            },
            {
              id: "2",
              taskNumber: "ST-2021120901.02",
              taskName: "Oil painting",
              status: "New Job",
              priority: "Low",
              activitiesSum: 1,
              startDate: "2021-12-13",
              endDate: "2022-12-13",
              info: "Providing Electrical service ",
              reportProblemList: [
                {
                  id: "1",
                  serialNumber: "AC0001",
                  itemDescription: "Air conditioner",
                  problemType: "Power supply failure",
                  solution: "Swap the PSU power cable ",
                  symptoms: "Steam system failure",
                },
              ],
              activityLog: [
                {
                  id: "1",
                  date: "2022-08-15 15:46",
                  user: "Marcus Mo",
                  avatarSrc: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
                  procedure: "Reassign to Admin",
                  place: "Cable TV Tower, 9 Hoi Shing Road,Tsuen Wan",
                },
                {
                  id: "2",
                  date: "2022-08-18 15:48",
                  user: "Marcus Mo",
                  avatarSrc: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
                  procedure: "Start",
                  place: "Cable TV Tower, 9 Hoi Shing Road,Tsuen Wan",
                },
                {
                  id: "3",
                  date: "2022-08-20 15:40",
                  user: "Marcus Mo",
                  avatarSrc: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
                  procedure: "Checking",
                  place: "Cable TV Tower, 9 Hoi Shing Road,Tsuen Wan",
                },
              ],
              attachmentList: [
                {
                  id: "1",
                  date: "2021-08-23",
                  number: "DL-20211209002",
                  fileList: [
                    {
                      id: "1",
                      src: "https://cdn.pixabay.com/photo/2015/10/30/20/13/sunrise-1014712_960_720.jpg",
                      type: "jpg",
                      title: "FS-21080001",
                      subtitle: "Inspection Sheet",
                    },
                    {
                      id: "2",
                      src: "https://images.pexels.com/photos/1366919/pexels-photo-1366919.jpeg?auto=compress&cs=tinysrgb&w=1600",
                      type: "jpg",
                      title: "FS-21080001",
                      subtitle: "Inspection Sheet",
                    },
                  ],
                },
              ],
            },
          ],
        };
        this.$store.commit("ProjectsStore/setTasks", tasks);
        this.loadingTasks = false;
      }, 1500);
    } else {
      this.$store.commit("ProjectsStore/setTasks", null);
      this.loadingTasks = false;
    }
  }

  // @Watch("overlay")
  // onOverLayChanged() {
  //   setTimeout(() => {
  //     this.overlay = false;
  //   }, 2000);
  // }
  mounted() {
    this.$store.dispatch("ProjectsStore/refreshContactPersonList");
  }
}
</script>

<style lang="scss">
@import "@/views/07000000-Project/Project.scss";
</style>
